<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="6" style="padding-top: 5px;">
          &nbsp;&nbsp;<span class="el-green">共计&nbsp;<em>{{listQuery.total}}</em>&nbsp;条</span>
        </el-col>
      </el-row>
    </section>
    <el-table :data="dataList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
      <el-table-column prop="id" label="编号" width="55"/>
      <el-table-column prop="module" align="center" label="模块">
        <template slot-scope="scope">
          <p>{{conf.module[scope.row.module]}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="action" align="center" label="动作">
        <template slot-scope="scope">
          <p>{{conf.action[scope.row.action]}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="behavior_desc" align="center" label="描述"></el-table-column>
      <el-table-column prop="des" align="center" label="操作">
        <template slot-scope="scope">
          <i class="iconfont ali-edit-2" @click="editForm(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 编辑模态框 -->
    <section>
      <el-dialog title="编辑描述" :visible.sync="isShow.add" width="30%">
        <el-form :model="editDeptForm" ref="createActive">
          <el-form-item label="描述" prop="behavior_desc" :rules="filter_rules({required:true})">
            <el-input v-model="editDeptForm.behavior_desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow.add = false">取 消</el-button>
          <el-button type="primary" @click="onCompile('createActive')">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import { searchTool } from '@/utils'
import { behavior_list,edit_save } from "@/api/behavior";
import config from '@/utils/conf'
import SoPagination from '@/components/SoPagination'
import SoToolBar from '@/components/SoToolBar'
import { toolData } from './actionManage'

export default {
  name: "actionManage",
  components: { SoPagination, SoToolBar },
  data() {
    return {
      toolData: toolData, //搜索工具栏初始化
      conf: config,
      loading: false,
      isShow: { add: false },
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      currentPage: 1,
      dataList: [],
      editDeptForm: {},
      currentRow: null
    };
  },
  methods: {
    search() {//搜索
      let keyWords = {key: 'searchDate', names: ['create_starttime', 'create_endtime']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
    //获取数据
    async initList() {
      this.loading = true;
      const query = {...this.listQuery, company_id: localStorage.getItem("companyId") - 0};
      const { data } = await behavior_list(query);
      this.loading = false;
      if (data.status == 100) {
        this.dataList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    },
    //打开编辑弹框
    editForm(scopeRow){
      this.isShow.add = true,
      this.editDeptForm.id=scopeRow.id;
      this.editDeptForm.module=scopeRow.module;
      this.editDeptForm.action=scopeRow.action;
      this.editDeptForm.behavior_desc=scopeRow.behavior_desc;
      this.editDeptForm.company_id=scopeRow.company_id;
    },
    //修改数据
    async saveObj(){
      const params = {...this.editDeptForm}
      this.loading = true;
      const { data } = await edit_save(params);
      this.loading = false;
      if(data.status == 100){
        this.$message.success("编辑成功");
        this.editDeptForm = {} //清空数据
        this.isShow.add = false,
        this.initList();
      }
    },
    onCompile(e){
      this.$refs[e].validate(valid => {
        if (valid) {
          this.saveObj();
        } else {
          return false;
        }
      });
    }
  },

  created() {
     this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$color: #606266;
span {
  font-size: 13px;
  color: $color;
}

.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}
</style>
